/*
 * @Description: 工单表格
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-03-31 09:51:31
 * @LastEditors: CHY
 * @LastEditTime: 2022-04-09 18:15:48
 */
import React, { useState, useEffect } from 'react';
import { Button, Table, Modal, message } from 'antd';


import Paging from '../paging';
import PubSub from 'pubsub-js';

import ModifiOrederInfo from './modifiOrderInfo'
import './index.css'
import '../button.css'
const OrderTable = () => {
    const [titleArr, setTitleArr] = useState([])
    const [isModalVisible, setIsModalVisible] = useState(false);
    PubSub.subscribe('tableTitle', (_, tableData) => {
        setTitleArr(tableData)
    })

    const orderDataSource = [
        {
            key: '1',
            orderCate: '订单配送',
            clientName: '全为',
            clientPerson: '未填写',
            headleState: '2022-03-30 ',
            staringTime: '2022-03-30 14:13：00',
            endTime: '2022-03-30 14:13:00',
            transportation: '飞机',
            businessTraveller: 'gaoying	',
            workSpecification: '<h1>4597<h1/>',
            dispatchName: '公园1号',
            jobRecord: '西湖园号',
            beginPerson: '西公1',
            startTime: '2022-03-30 14:14:00',
            accessory: '',
            admin: ''
        },
        {
            key: '2',
            orderCate: '订单配送',
            clientName: '张三',
            clientPerson: '未填写',
            headleState: '2022-03-30 ',
            staringTime: '2022-03-30 14:13：00',
            endTime: '2022-03-30 14:13:00',
            transportation: '飞机',
            businessTraveller: 'gaoying	',
            workSpecification: '<h1>4597<h1/>',
            dispatchName: '公园2号',
            jobRecord: '西湖园号',
            beginPerson: '西公2',
            startTime: '2022-03-30 14:14:00',
            accessory: '',
            admin: ''
        },
    ];

    const orderColumns = [
        {
            title: '工单类型',
            dataIndex: 'orderCate',
            key: 'orderCate',
        },
        {
            title: '客户名称',
            dataIndex: 'clientName',
            key: 'clientName',
        },
        {
            title: '客户联系人',
            dataIndex: 'clientPerson',
            key: 'clientPerson',
        },
        {
            title: '处理状态',
            dataIndex: 'headleState',
            key: 'headleState',
            render: () => {
                return (<><Button size='small' type='primary' className='but-contanier btn-bgc-9'>未处理</Button></>)
            }
        },
        {
            title: '起始时间',
            dataIndex: 'staringTime',
            key: 'staringTime',
        },
        {
            title: '结束时间',
            dataIndex: 'endTime',
            key: 'endTime',
        },
        {
            title: '交通方式',
            dataIndex: 'transportation',
            key: 'transportation',
        },
        {
            title: '差旅联系人',
            dataIndex: 'businessTraveller',
            key: 'businessTraveller',
        },
        {
            title: '工作描述',
            dataIndex: 'workSpecification',
            key: 'workSpecification',
        },
        {
            title: '指派人员',
            dataIndex: 'dispatchName',
            key: 'dispatchName',
        },
        {
            title: '工作记录',
            dataIndex: 'jobRecord',
            key: 'jobRecord',
            render: () => {
                return (<><Button size='small' type='primary' className='but-contanier btn-bgc2 '>工作记录</Button></>)
            }
        },
        {
            title: '发起人',
            dataIndex: 'beginPerson',
            key: 'beginPerson',
        },
        {
            title: '发起时间',
            dataIndex: 'startTime',
            key: 'startTime',
        },
        {
            title: '附件',
            dataIndex: 'accessory',
            key: 'accessory',
            render: () => {
                return (<><Button type='primary' size='small' className='but-contanier btn-bgc-10'>无附件</Button></>)
            }
        },
        {
            title: '管理',
            dataIndex: 'admin',
            key: 'admin',
            render: () => {
                return (<><Button size='small' type='primary' className='but-contanier btn-bgc-2' onClick={(e) => modifiHeadle(e, 1)}>修改</Button>&nbsp;
                    <Button size='small' type='primary' className='but-contanier  btn-bgc-11'>删除</Button></>)
            }

        },
    ];
    function modifiHeadle(e, id) {

        PubSub.publish('modifiInfo', orderDataSource)
        console.log(id);
        setIsModalVisible(true);
    }
    const handleOk = (e) => {
        setIsModalVisible(false);
        e.stopPropagation()
    };

    const handleCancel = (e) => {
        setIsModalVisible(false);
        e.stopPropagation()
        // console.log("@@@@");
    };

    //职位信息弹窗
    const info = (str) => {
        message.error(str);
    };
    let arr = null
    const saveHeadle = () => {
        if (arr === null || arr === undefined || arr.text === undefined) {
            info('工作描述和差旅联系人不能为空！')
            return
        }
        handleCancel()
        console.log(arr.clientName);
        console.log(arr.text);
    }
    useEffect(() => {
        console.log('工单表格', titleArr);
        PubSub.subscribe('modifiDataAll', (_, data) => {
            arr = data
            console.log('modifiDataAll', data);
        })

        return () => {
            //取消指定的订阅
            PubSub.unsubscribe('tableTitle')
            // 取消全部订阅
            PubSub.clearAllSubscriptions()
        }
    }, [titleArr])
    useEffect(() => {
        PubSub.publish('modifiInfo', orderDataSource)
    })
    return (
        <>
            <Table dataSource={orderDataSource} columns={orderColumns} bordered pagination={false} onRow={record => {
                return {
                    onClick: (event) => { }, // 点击行
                    onDoubleClick: event => { },
                    onContextMenu: event => { },
                    onMouseEnter: event => { }, // 鼠标移入行
                    onMouseLeave: event => { },
                };
            }} />
            {/* 分页 */}
            <section className='pagoing-container'>

                <Paging total={orderDataSource.length} />
            </section>
            {/* 模态框 */}
            <section>
                <Modal title="新增工单【第一步：选择客服名称】" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} className='newAddOrder-box modifiOrder-modal'
                    footer={[
                        <Button key="back" onClick={saveHeadle} className='btn-bgc-13'>保存</Button>,
                        <Button key="self" onClick={handleCancel} className='btn-bgc-12'> 返回</Button>]}
                >
                    <ModifiOrederInfo />
                </Modal>
            </section>
        </>
    );
}

export default OrderTable;
